<template>
  <div style="height:100%">

<!--    表格区-->
    <vxe-grid  v-bind="gridOptions"  ref="tableRef">
      <template #toolbar_buttons>
<!--        <span style="padding-left: 10px">DKL生产排班记录</span>-->
        <Button type="primary" size="small" @click="handleCreate" >新增</Button>
        <Button type="primary" size="small" @click="handleOpenOrder" style="margin-left: 10px">订单查询</Button>

      </template>
      <template #tool_ref>
      </template>
      <template #action="{ row }">
        <TableAction outside :actions="getActions(row)
              "/>
      </template>
    </vxe-grid>
<!--    <add @register="register" @success="handleSuccess" />-->

    <SelectOrderIndex ref="selectOrderRef"   :isAdd="true"
    ></SelectOrderIndex>
  </div>

</template>
<script lang="ts" setup>
import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
  VxeTableDefines,
} from '@/components/VxeTable';
import add from './add.vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {queryDknTableList, mainPlanList, removeMainPlan} from '@/api/heng/dkn';
import { useDrawer } from '@/components/Drawer';

import { useRouter } from 'vue-router';

const router = useRouter()

import {onMounted, reactive, ref} from 'vue';

import { useMessage } from "@/hooks/web/useMessage";
import {Button, Modal,Card,CardGrid} from 'ant-design-vue';
import { useGo } from "@/hooks/web/usePage";
import {planListColumns} from "./role.data";
import {useUserStore} from "@/store/modules/user";
import SelectOrderIndex from "@/views/dkn/components/formSelectTable/order/SelectOrderIndex.vue";
const contentHeight = ref(window.innerHeight);

const go = useGo();
const userStore = useUserStore();
const userName = userStore.getUserInfo?.userName;

defineOptions({ name: 'ywDeptList' });
const { createMessage } = useMessage();

// const [register, { openModal, closeModal }] = useModal();
const [register, { openDrawer,closeDrawer }] = useDrawer();

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: planListColumns,
  filterConfig: {
    // remote: true,
  },
  sortConfig:{
    field: 'requireDate',
    order: 'asc'
  },
  exportConfig:{},
  toolbarConfig: {
    // enabled: false,
    slots: {
      buttons: 'toolbar_buttons',
      tools:'tool_ref'
    },
  },
  formConfig: {
    // data: {
    //   biaoShiHao: '',
    // },
    items: [

      // {
      //   field: 'izWeiPlan', title: '是否安排',
      //   itemRender: {
      //     defaultValue: 2,
      //     name: 'VxeSelect',
      //     props: {
      //       clearable: true,
      //     },
      //     options: [
      //       {label: "未安排", value: 1}, {label: "已安排", value: 2}]
      //   },
      // },
      { field: 'keyword', title: '查询', itemRender: { name: 'VxeInput' } },

      // },
      // { field: 'izWeiPlan', title: '是否安排',
      //   itemRender: {
      //     defaultValue:2,
      //     name: 'VxeSelect',
      //     props: {
      //       clearable:true,
      //     },
      //     options:[
      //       {label:"未安排",value:1},{label:"已安排",value:2}]
      //   },
      // },
      {
        itemRender: {
          name: 'VxeButtonGroup',
          options: [
            { type: 'submit', content: '搜索', status: 'primary' },
            { type: 'reset', content: '重置' }
          ]
        }
      }
    ]
  },
  pagerConfig: {
  },
  proxyConfig: {
    props:{
      result:"data.list",
      list:"data.list",
      total:"data.totalResult",
      message:"message"
    },
    ajax: {
      query: ({ page, form, filters }) => {
        return findPageList(page, form, filters);
      },

    },
  },
});


const loading=ref(false);
const msgList = ref([]);
const dataList2=ref([]);
const selectOrderRef=ref();//添加弹层

const applyViewShow = ref(false);

const tableRef = ref<VxeGridInstance>();

const formData=ref({});

function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {
  let json = {};
  if (filterList && filterList.length) {
    filterList.forEach((e) => {
      const value = e.datas[0];
      let field = e.field;
      json[field ] = value;
    });
  }

  return mainPlanList({
    page: page.currentPage,
    pageSize: page.pageSize,
    ...form,
    ...json
  });
}



function handleEdit(record: Recordable) {
  record.isUpdate=true;
  // openDrawer(true, record); query
 // go(`/forecastNeedAdd/${record.id}`);///plan/planDkn/forecastNeedAdd/${record.mainId}
  router.push({ name:"forecastNeedAdd2", params: { mainId: record.id } })
  // openDrawer(true, record);
}

function handleCreate() {
 // openDrawer(true,{mainId:""});
  go({ name:"forecastNeedAdd2"});

}

function handleOpenOrder(){
  selectOrderRef.value.openFn({title:"查看排产计划"});
}


function getActions(record) {
  let arr = [];
  // if(record.mainId){
  //
  // }
  arr.push(
    { label:'查看', onClick: handleEdit.bind(null, record),},
  )

  if(userName == '李金虎' ||userName == 'manage'){
    arr.push(
      {
        // icon: 'ant-design:delete-outlined',
        label: '删除',
        color: 'error',
        loading: record.loading,
        popConfirm: {
          title: '是否删除？',
          placement: 'left',
          confirm: handleDelete.bind(null, record),
        },
      }
    )
  }

  return arr;
}


function handleSuccess(){

  tableRef.value?.commitProxy("reload");
}

function handleDelete(record){
  record.loading=true;
  removeMainPlan({mainId:record.id}).then(res=>{
    if(res.code==200){
      createMessage.success(res.message);
      handleSuccess();
      // closeDrawer();
      // emit('success');
    }else{
      createMessage.error(res.message);
    }
  }).finally(()=>{
    record.loading=false;
  });
}

</script>
<style lang="less">
.my-table{
  //width: 40%;
  margin-bottom: 5px;
  margin-top: 5px;
}
</style>
